<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
        crossorigin="anonymous">

    <title>Bootstrap Sandbox</title>
</head>

<body>
    <header>
        <h1 class="display-3 text-center my-4">Spacing</h1>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            2: Utilities
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="2_2_basic_typography.html">2.2 Basic Typography</a>
                            <a class="dropdown-item" href="2_3_text_alignment_display.html">2.3 Text Alignment & Display</a>
                            <a class="dropdown-item" href="2_4_floats_position.html">2.4 Floats & Position</a>
                            <a class="dropdown-item" href="2_5_colors_background.html">2.5: Colors & Background</a>
                            <a class="dropdown-item" href="2_6_spacing.html">2.6 Spacing</a>
                            <a class="dropdown-item" href="2_7_sizing.html">2.7 Sizing</a>
                            <a class="dropdown-item" href="2_8_breakpoints.html">2.8 Breakpoints</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-success btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            3: CSS Components
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="3_2_buttons.html">3.2 Buttons</a>
                            <a class="dropdown-item" href="3_3_navbar.html">3.3 Navbar</a>
                            <a class="dropdown-item" href="3_4_list_groups_badges.html">3.4 List Groups & Badges</a>
                            <a class="dropdown-item" href="3_5_forms.html">3.5 Forms</a>
                            <a class="dropdown-item" href="3_6_input_groups.html">3.6 Input Groups</a>
                            <a class="dropdown-item" href="3_7_alerts_progress.html">3.7 Alerts & Progress</a>
                            <a class="dropdown-item" href="3_8_tables_pagination.html">3.8 Tables & Pagination</a>
                            <a class="dropdown-item" href="3_9_cards.html">3.9 Cards</a>
                            <a class="dropdown-item" href="3_10_media_object.html">3.10 Media Objects</a>
                            <a class="dropdown-item" href="3_11_jumbotron.html">3.11 Jumbotron</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-warning btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            4: Grid & Flexbox
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="4_2_grid_system.html">4.2 Grid System</a>
                            <a class="dropdown-item" href="4_3_grid_alignment.html">4.3 Grid Alignment</a>
                            <a class="dropdown-item" href="4_4_flexbox.html">4.4 Flexbox</a>
                            <a class="dropdown-item" href="4_5_auto_margins_wrapping_order.html">4.5 Auto Margins & Wrap</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="dropdown">
                        <button class="btn btn-danger btn-block dropdown-toggle" type="button" data-toggle="dropdown">
                            5: JavaScript Widgets
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="5_2_carousel.html">5.2 Carousel</a>
                            <a class="dropdown-item" href="5_3_collapse.html">5.3 Collapse</a>
                            <a class="dropdown-item" href="5_4_tooltips.html">5.4 Tooltips</a>
                            <a class="dropdown-item" href="5_5_popovers.html">5.5 Popovers</a>
                            <a class="dropdown-item" href="5_6_modals.html">5.6 Modals</a>
                            <a class="dropdown-item" href="5_7_scrollspy.html">5.7 ScrollSpy</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </header>

    <div class="container">
        <!--###################START HERE####################-->

        <!-- MB MARGIN BOTTOM -->
        <h1 class="mb-0 bg-success">Margin Bottom 0</h1>
        <h1 class="mb-1 bg-success">Margin Bottom 1</h1>
        <h1 class="mb-2 bg-success">Margin Bottom 2</h1>
        <h1 class="mb-3 bg-success">Margin Bottom 3</h1>
        <h1 class="mb-4 bg-success">Margin Bottom 4</h1>
        <h1 class="mb-5 bg-success">Margin Bottom 5</h1>

        <br>
        <br>

        <!-- MT MARGIN TOP -->
        <h1 class="mt-0 bg-success">Margin Top 0</h1>
        <h1 class="mt-1 bg-success">Margin Top 1</h1>
        <h1 class="mt-2 bg-success">Margin Top 2</h1>
        <h1 class="mt-3 bg-success">Margin Top 3</h1>
        <h1 class="mt-4 bg-success">Margin Top 4</h1>
        <h1 class="mt-5 bg-success">Margin Top 5</h1>

        <br>
        <br>

        <!-- ML & MR -->
        <p>
            <span class="mr-5 bg-success">Margin Right 5</span> dolor sit amet,
            <span class="ml-3 bg-success">Margin Left 3 </span> elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- MX MARGIN LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="mx-5 bg-success">Margin Left & Right 5</span>, consectetur elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- MY  MARGIN TOP BOTTOM -->
        <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>
        <p class="my-5 bg-success">Margin Top & Bottom 5</p>
        <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- BLANK - ALL SIDES -->
        <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>
        <p class="m-5 bg-success">Margin All Sides 5</p>
        <p>Lorem ipsum dolor sit amet, consectetur elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- PB PADDING BOTTOM -->
        <h1 class="pb-0 bg-warning">Padding Bottom 0</h1>
        <h1 class="pb-1 bg-warning">Padding Bottom 1</h1>
        <h1 class="pb-2 bg-warning">Padding Bottom 2</h1>
        <h1 class="pb-3 bg-warning">Padding Bottom 3</h1>
        <h1 class="pb-4 bg-warning">Padding Bottom 4</h1>
        <h1 class="pb-5 bg-warning">Padding Bottom 5</h1>

        <br>
        <br>

        <!-- PT PADDING TOP -->
        <h1 class="pt-0 bg-warning">Padding Top 0</h1>
        <h1 class="pt-1 bg-warning">Padding Top 1</h1>
        <h1 class="pt-2 bg-warning">Padding Top 2</h1>
        <h1 class="pt-3 bg-warning">Padding Top 3</h1>
        <h1 class="pt-4 bg-warning">Padding Top 4</h1>
        <h1 class="pt-5 bg-warning">Padding Top 5</h1>

        <br>
        <br>

        <!-- PL & PR -->
        <p>
            <span class="bg-warning pr-5">Padding Right 5</span> dolor sit amet,
            <span class="bg-warning pl-3">Padding Left 3 </span> elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- PX PADDING LEFT RIGHT -->
        <p>Lorem ipsum
            <span class="px-5 bg-warning">Padding Left & Right 5</span>, consectetur elit. Voluptatum, optio.</p>

        <br>
        <br>

        <!-- PY  PADDING TOP BOTTOM -->
        <p class="py-5 bg-warning">Padding Top & Bottom 5</p>

        <br>
        <br>

        <!-- ALL SIDES -->
        <p class="p-3 bg-warning">Padding All Sides 5</p>

        <!-- HORIZONTAL CENTERING -->
        <div class="bg-info mx-auto" style="width: 200px;">
            Horizontal Centering
        </div>

    </div>
    <!-- ./container -->
    <div style="margin-top:500px;"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"></script>
</body>

</html>

<!--

{property}{sides}-{size}

###PROPERTY
m - for classes that set margin
p - for classes that set padding

###SIDES
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

###SIZE
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer-x * .25 or $spacer-y * .25
2 - (by default) for classes that set the margin or padding to $spacer-x * .5 or $spacer-y * .5
3 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
4 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
5 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3


.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer-x * .25) !important;
}

.px-2 {
  padding-left: ($spacer-x * .5) !important;
  padding-right: ($spacer-x * .5) !important;
}

.p-3 {
  padding: $spacer-y $spacer-x !important;
}
-->